<!--
 * @Author: zhouyaohui
 * @Date: 2025-10-11 15:43:47
 * @LastEditTime: 2025-11-18 11:25:12
 * @FilePath: \miyun-warehouse\src\views\admin\Layout.vue
-->
<template>
  <div class="container">
    <div class="header"
      style="height: 60px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <img src="@/assets/imgs/logo.png" alt="" style="width: 40px">
          <div style="font-weight: bold; font-size: 24px; margin-left: 5px">管理系统</div>
        </div>
      </div>
      <div style="width: fit-content; padding-right: 10px; display: flex; align-items: center;">
        <img style="width: 40px; height: 40px; border-radius: 50%"
          :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="">
        <span style="margin-left: 5px">{{ user.name }}</span>
      </div>
    </div>

    <div style="display: flex">
      <div class="aside" style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
        <el-menu router style="border: none" :default-active="currentRoutePath" :default-openeds="['/home', '2']">
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span>系统首页</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/role">
            <i class="el-icon-s-custom"></i>
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/menu">
            <i class="el-icon-menu"></i>
            <span>菜单管理</span>
          </el-menu-item>
           <el-menu-item index="/device/plc">
              <i class="el-icon-s-flag"></i>
              <span>PLC信息管理</span>
            </el-menu-item>
            <el-menu-item index="/device/shelf">
              <i class="el-icon-box"></i>
              <span>货架信息管理</span>
            </el-menu-item>
            <el-menu-item index="/device/binding">
              <i class="el-icon-link"></i>
              <span>PLC绑定关系</span>
            </el-menu-item>

           <el-menu-item index="/device/info">
            <i class="el-icon-lock"></i>
            <span>设备管理</span>
          </el-menu-item>
          <el-menu-item index="/bluetooth">
            <i class="el-icon-lock"></i>
            <span>蓝牙基站管理</span>
          </el-menu-item>
          <el-menu-item index="/rfid">
            <i class="el-icon-lock"></i>
            <span>Rfid管理</span>
          </el-menu-item>
          <el-menu-item index="/stock">
            <i class="el-icon-box"></i>
            <span>库存管理</span>
          </el-menu-item>
          <el-menu-item index="/stock/manual">
            <i class="el-icon-edit"></i>
            <span>手动库存管理</span>
          </el-menu-item>
          <el-menu-item index="/inventory">
            <i class="el-icon-lock"></i>
            <span>库存管理</span>
          </el-menu-item>
          <el-menu-item index="/material/location">
            <i class="el-icon-search"></i>
            <span>物资定位查询</span>
          </el-menu-item>
           <el-menu-item index="/operationlog" >
            <i class="el-icon-view"></i>
            <span>操作日志</span>
          </el-menu-item>
          <el-menu-item index="/logout" @click="logout">
            <i class="el-icon-switch-button"></i>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="main" style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px">
        <router-view @updateUser="updateUser" />
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";

export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem('system-user') || '{}'),
      currentRoutePath: this.$route.path,
    };
  },
  created() {
    if (!this.user?.id) {
      this.$message.error('请登录！');
      router.push('/login');
    }
  },
  methods: {
    updateUser() {
      this.user = JSON.parse(localStorage.getItem('system-user') || '{}');
    },
    logout() {
      this.$message.success('退出成功');
      localStorage.removeItem('system-user');
      router.push('/login');
    },
  },
};
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: #e0edfd !important;
}

.el-menu-item:hover {
  color: #1967e3;
}

:deep(th) {
  color: #333;
}
</style>